<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
  <div id="box">
    <!-- 内容指令  -->
    <p v-text="htmlContent"> </p>
    <p v-html="htmlContent"> </p>

    <!-- 渲染指令 -->
    <!-- item是值：aa, bb, cc, dd。 -->
    <p v-for="aitem in arr">{{aitem}} </p> 
    <p v-for="item in obj">{{item}} </p> 
    <!-- item是值：10、20、30。
    index是属性：a、b、c。key是下标：1、2、3。 -->
    <p v-for="(item,index,key) in obj">{{item}}-{{index}}-{{key}}</p>
    <p v-show="bool"> v-show内容</p> 
    <p v-if="bool"> v-if内容</p> 

    <!-- 属性指令 -->
    <p v-bind:title="title"> 这是内容 </p>
    <p :title="title"> 这是内容</p>

    <!-- 事件指令 --> <!-- 点击事件 -->
    <button v-on:click="output">按钮</button>
    <button @click="output">按钮</button><br>

    <!-- 表单指令，表单输入绑定,会同步更新 -->
    <input v-model="inputV" type="text">
    <p>{{inputV}}</p>
  <!-- input的一个双向绑定，它视图变了，会更新底部数据 。
    p标签是由数据驱动的，数据变了，它会自动更新视图。-->  



    <!-- 5、修饰符-->
    <input v-model="msg">
    <input v-model.trim="msg">
    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg">
    <input v-model.number="msg"><br>
    <input v-model="age" type="number">   
    <input v-model.number="age" type="number">   


  </div>

    <!-- 引入本地的Vue -->
    <script src="./vue.js"></script>
  <script>

    const vm = new Vue({
    el:"#box",
    data() {
      return {
        htmlContent:'看<span>span内容</span>这里',
        arr:['aa','bb','cc','dd'],
      //JS中的{} 大括号，表示定义一个对象，有成对的属性和值。  
        obj:{a:10, b:20, c:30},
        bool:false,
        title:'标题文本',
        inputV:"默认文本",
        msg:"一个文本",
        age:999
      }
    },
    methods: {
        output(){
            console.log('method执行了');
        }       
    },
    });
  </script>
  </body>
</html>
